 <!-- 
 @Author: Havery   
 @Date: 2021-01-11 13:57:46   
 @function:操作日志信息
----------------------------------------------------------  
 @Last Modified by:   LC-2021-01-11 13:57:46  
 @Modified function:xxx 
 -->
<template>
  <div>
    <el-card class="box-card card1" shadow="hover">
      <div class="searchBox">
        <!-- 搜索筛选 -->
        <el-form :inline="true" :model="formSearch" class="user-search">
          <el-form-item label="搜索：">
            <el-input
              size="mini"
              v-model="formSearch.parameters.sKeyWords"
              placeholder="输入关键字"
            ></el-input>
          </el-form-item>
          <el-form-item label="日志类型：">
            <el-select v-model="formSearch.parameters.type" size="mini">
              <el-option
                v-for="item in listTypeData"
                :key="item.Value"
                :label="item.Text"
                :value="item.Value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-search"
              @click="handleSearch()"
              >搜索</el-button
            >
          </el-form-item>
          <el-form-item label="删除条件：">
            <el-date-picker
              size="mini"
              v-model="removeForm.data"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-remove"
              @click="handleRemove"
              >删除</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-row :gutter="10">
      <el-col :span="24">
        <el-card class="box-card" shadow="hover">
          <!--列表  @selection-change="selectChange" 复选-->
          <el-table
            class="ptab"
            border
            stripe
            size="small" 
            :data="listData"
            highlight-current-row
            v-loading="loading"
            element-loading-text="拼命加载中"
            style="width: 99%"
            :height="tableHeight"
          >
            <el-table-column align="center" label="序号" width="55px">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              sortable
              prop="service_name"
              label="所属服务"
              width="200px"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              align="center"
              sortable
              prop="func_typename"
              label="功能类型"
            ></el-table-column>
            <el-table-column
              align="center"
              sortable
              prop="business_title"
              label="业务标题"
              width="300px"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              align="center"
              sortable
              prop="user_name"
              label="操作用户名"
              width="120px"
            ></el-table-column>
            <el-table-column
              align="center"
              sortable
              prop="ip_address"
              label="IP地址"
            ></el-table-column>
            <el-table-column
              align="center"
              sortable
              prop="create_date"
              label="创建时间"
            ></el-table-column>
            <el-table-column
              align="center"
              sortable
              prop="detail"
              label="操作明细"
              width="350px"
              :show-overflow-tooltip="true"
            ></el-table-column>
          </el-table>
          <!-- 分页组件 pageparm返回的分页参数信息 pageListInfo为分页组件回掉方法-->
          <Pagination
            v-bind:child-msg="pageparm"
            @callFather="pageListInfo"
          ></Pagination>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
//引用对象【不同业务，需要各玩各的。别一个界面就完成所有。业务复杂以后，搞死一堆人】
import Pagination from "@/components/common/pagination"; //分页组建
import OperationLogHttp from "@/api/basic/logInfo/operationlog"; //http

//定义变量
const {
  loadList, //获取操作日志分页信息
  loadLogTypeList, //获取日志类型
  removeInfo, //删除
} = OperationLogHttp;
export default {
  //注册组件
  components: {
    Pagination, //分页组建
  },
  data() {
    return {
      //列表相关
      loading: false, //是显示加载
      tableHeight: window.innerHeight * 0.736, //表格高度
      pageparm: { currentPage: 1, pageSize: 16, total: 0 }, //分页参数
      listData: [], //表格返回信息
      formSearch: {
        //请求数据参数
        page: 1,
        limit: 16,
        field: "create_date",
        order: "desc",
        parameters: {
          sKeyWords: "",
          func_type: "",
          type: "",
        }, //关键字
      },
      //删除参数
      removeForm: {
        data: [],
      },
      listTypeData: [], //日志类型
      //日期选择器快捷
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  /**html加载完成之前，执行。执行顺序：父组件-子组件 */
  created() {
  },
  /**[页面初始化方法]html加载完成后执行。执行顺序：子组件-父组件*/
  mounted() {
    //初始化获取
    this.loadLogTypeList();
  },
  /**
   * 数据发生改变
   */
  watch: {},
  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    //获取数据方法
    loadList() {
      this.loading = true;
      let par =  this.formSearch;
      if (par.parameters.type == "") {
        par.parameters.func_type = 0;
      } else {
        par.parameters.func_type = par.parameters.type;
      }
      loadList(par).then((response) => {
        let data = response.data;
        if (data.Code === 1000) {
          this.listData = data.Data;
          //分页赋值
          this.pageparm.currentPage = this.formSearch.page;
          this.pageparm.pageSize = this.formSearch.limit;
          this.pageparm.total = data.Count;
        } else {
          this.listData = data.Data;
        }
        this.loading = false;
      });
    },
    ///获取日志类型
    loadLogTypeList() {
      loadLogTypeList().then((response) => {
        let data = response.data;
        if (data.Code === 1000) {
          this.listTypeData = data.Data;
        } else {
          this.$messageTip.warning(data.Msg); 
        }
        this.loadList();
      });
    },
    //分页插件事件
    pageListInfo(par) {
      this.formSearch.page = par.currentPage;
      this.formSearch.limit = par.pageSize;
      this.loadList();
    },
    //搜索事件
    handleSearch() {
      this.formSearch.page = 1;
      this.formSearch.limit = 16;
      this.loadList();
    },
    //删除
    handleRemove(index, row) {
      this.$messageTip.boxWarning("确定要删除吗?")
        .then(() => {
          if (this.removeForm.data.length != 2) {
            this.$messageTip.warning("请选择删除的时间"); 
          } else {
            let par = {
              startTime: this.getTime(this.removeForm.data[0]),
              endTime: this.getTime(this.removeForm.data[1]),
            };
            removeInfo(par).then((response) => {
              let data = response.data;
              if (data.Code === 1000) {
                this.$messageTip.success(data.Msg); 
                this.loadList();
              } else {
                this.$messageTip.warning(data.Msg); 
              }
            });
          }
        })
        .catch(() => {
          this.$messageTip.info("已取消删除！");
        });
    },
    //时间格式化
    dateFormat(row, column, cellValue, index) {
      const daterc = row[column.property];
      if (daterc != null) {
        return daterc.slice(0, 10);
      }
    },
    getTime(time) {
      var date = new Date(time);
      var y = date.getFullYear();
      var m =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var d = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return y + "-" + m + "-" + d;
    },
  },
};
</script>
    <style>
.el-tooltip__popper {
  max-width: 20%;
}
.el-tooltip__popper,
.el-tooltip__popper.is-dark {
  background: rgb(48, 65, 86) !important;
  color: #fff !important;
  line-height: 24px;
}
</style>